<template>
    <div class="mypage">
        <homeview></homeview>
        <div class="my_title">
            <div>我的</div>
        </div>
        <div class="my_user" @click="user">
            <img class="myimg" :src="e_img" alt="">
            <div class="my_nub">
                <div class="my_name">{{ e_name }}</div>
                <div class="my_id">{{ occupancy }}</div>
            </div>
            <img class="myimg1" src="../img/lingdang.png" alt="">
        </div>
        <div class="my_order">
            <div class="my_income">
                <div style="font-weight: 600; font-size: 16px;">今日收入</div>
                <span style="font-size: 30px;">{{ total_income }}</span>
                <span style="font-size: 15px;">元</span>
                <div style="font-size: 12px; color:rgb(199, 194, 194);">今日收入金额</div>
            </div>
            <div>
                <div style="font-weight: 600; font-size: 16px;">订单统计</div>
                <span style="font-size: 30px;">{{ completed_order_count }}</span>
                <span style="font-size: 15px;">单</span>
                <div style="font-size: 12px; color:rgb(199, 194, 194);">今日完成单量</div>
            </div>
        </div>
        <div class="my_order">
            <div class="my_income">
                <div style="font-weight: 600; font-size: 16px;">我的信用分</div>
                <span style="font-size: 30px;">10</span>
                <span style="font-size: 15px;">分</span>
                <div style="font-size: 12px; color:rgb(199, 194, 194);">当前信用分</div>
            </div>
            <div>
                <div style="font-weight: 600; font-size: 16px;">我的评分</div>
                <span style="font-size: 30px;">{{ favorable_rate }}</span>
                <div style="font-size: 12px; color:rgb(199, 194, 194);">当前评分</div>
            </div>
        </div>
        <div class="option">
            <div class="state">
                <img class="state_img" src="../img/hr.png" alt="">
                <div class="state_text">接单状态</div>
                <van-switch v-model="checked" class="switch" />
            </div>
            <div class="state">
                <img class="state_img" src="../img/wallet.png" alt="">
                <div class="state_text">我的钱包</div>
                <img src="../img/right.png" alt="" class="option_img">
            </div>
            <div class="state" @click="realname">
                <img class="state_img" src="../img/hat.png" alt="">
                <div class="state_text">实名认证</div>
                <img src="../img/right.png" alt="" class="option_img">
            </div>
            <div class="state">
                <img class="state_img" src="../img/deposit.png" alt="">
                <div class="state_text">保证金</div>
                <img src="../img/right.png" alt="" class="option_img1">
            </div>
            <div class="state">
                <img class="state_img" src="../img/airplane.png" alt="">
                <div class="state_text">推广中心</div>
                <img src="../img/right.png" alt="" class="option_img">
            </div>
            <div class="state">
                <img class="state_img" src="../img/share.png" alt="">
                <div class="state_text">邀请好友</div>
                <img src="../img/right.png" alt="" class="option_img">
            </div>
            <div class="state">
                <img class="state_img" src="../img/customer.png" alt="">
                <div class="state_text">联系客服</div>
                <img src="../img/right.png" alt="" class="option_img">
            </div>
            <div class="state" @click="changepwd">
                <img class="state_img" src="../img/pwd.png" alt="">
                <div class="state_text">修改密码</div>
                <img src="../img/right.png" alt="" class="option_img">
            </div>
            <button class="exit" @click="exit">退出登录</button>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import homeview from './tabbar.vue'
import http from '@/http';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/counter';
const userStore = useUserStore();
const checked = ref('');
const escortdata = ref([]);
localStorage.setItem('phone', userStore.phone);
const e_name = ref('');
const e_img = ref('');
const favorable_rate = ref('');
const status = ref('');
const order_data = ref([]);
const completed_order_count = ref('');
const total_income = ref('');
const occupancy = ref('');
const router=useRouter();

function order() {
    http.get('escort/order/', {
        params: {
            e_name: e_name.value
        }
    }).then(res => {
        order_data.value = res.data.orders;
        total_income.value = res.data.orders.total_income;
        completed_order_count.value = res.data.orders.completed_order_count;
        console.log(order_data.value);
    }).catch(err => {
        console.log(err);
    })
}

function exit() {
    router.push('/');
}


function getscore() {
    http.post('/escort/score/', {
            phone: userStore.phone,
    }).then(res => {
        console.log("<<<<<",res.data);
        favorable_rate.value = res.data.average_score
    }).catch(err => {
        console.log(err);
    })
}
onMounted(() => {
    http.get('escort/searchescort/', {
        params: {
            phone: userStore.phone
        }
    }).then(res => {
        escortdata.value = res.data.escorts;
        e_name.value = res.data.escorts[0].e_name;
        e_img.value = res.data.escorts[0].img;
        status.value = res.data.escorts[0].status;
        occupancy.value = res.data.escorts[0].occupancy;
        console.log(res.data);
        if (status.value == '空闲') {
            checked.value = true;
        } else {
            checked.value = false;
        }
        order()

    }).catch(err => {
        console.log(err);
    });
    getscore();
})
watch(checked, (newVal) => {
    http.post('escort/searchescort/', {
        params: {
            phone: userStore.phone,
            checked: newVal.toString()
        }
    }).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
})
function user() {
    router.push('/changeimg');
}
function changepwd() {
    router.push('/changepwd');
}
function realname() {
    router.push('/escort_certification');
}
</script>
<style scoped>
.mypage {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, #509eec, #ffffff);
}

.my_title {
    width: 100%;
    height: 40px;
    padding-top: 15px;
    text-align: center;
}

.my_user {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin: 5%;
}

.myimg {
    width: 50px;
    height: 50px;
    margin-left: 2.5%;
    border-radius: 50%;
}

.my_nub {
    margin-left: 10px;
}

.my_name {
    font-weight: 600;
}

.my_id {
    font-size: 14px;
}

.myimg1 {
    width: 35px;
    height: 35px;
    position: absolute;
    right: 10%;
}

.my_order {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgb(255, 255, 255);
    width: 90%;
    height: 90px;
    margin-left: 5%;
    margin-top: 10px;
    border-radius: 10px;
}

.my_income {
    margin-left: -6%;
}

.option {
    width: 90%;
    height: 80vh;
    margin-left: 5%;
    background-color: rgb(255, 255, 255);
    margin-top: 10px;
}

.state {
    display: flex;
    align-items: center;
    margin-top: 5px;
}
.state_img {
    width: 30px;
    height: 30px;
    margin: 10px;
}

.state_text {
    margin-left: 6px;
}

.switch {
    position: absolute;
    right: 10%;
}

.option_img {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 10%;
}

.option_img1 {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 10%;
}
.exit {
    margin-top: 10px;
    color: #d6ebff;
    width: 30%;
    height: 30px;
    margin-left: 35%;
    background-color: #43a1ff;
    border-radius: 5px;
    border: none;
}
</style>